<div class="page-layout carded fullwidth " id="permit" xmlns="">

    <!-- HEADER -->
    <div class="header accent p-24" fxLayout="column" fxLayoutAlign="center start">
        <breadcrumb></breadcrumb>
    </div>
    <!-- / HEADER -->

    <!-- CONTENT -->
    <div class="content p-24">

        <!-- CONTENT CARD -->
        <div class="content-card">
            <table [@animateStagger]="{value:'50'}"
                   basePerfectScrollbar
                   class="user-table mat-elevation-z8 mat-table">
                <tr class="mat-header-row ng-star-inserted">
                    <th class="mat-header-cell cdk-column-position mat-column-position ng-star-inserted">
                        <p class="text-truncate" style="margin: 3px 3px 3px 40px">权限名称</p>
                    </th>
                    <th class="mat-header-cell cdk-column-position mat-column-position ng-star-inserted">
                        <p class="text-truncate" style="margin: 3px">权限路由 </p>
                    </th>
                    <th class="mat-header-cell cdk-column-position mat-column-position ng-star-inserted"><p
                        class="text-truncate" style="margin: 3px">请求类型</p></th>
                    <th class="mat-header-cell cdk-column-position mat-column-position ng-star-inserted"><p
                        class="text-truncate" style="margin: 3px">权限分类</p></th>
                    <th class="mat-header-cell cdk-column-position mat-column-position ng-star-inserted"><p
                        class="text-truncate"></p></th>

                </tr>
                <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl" class="display-contents ">
                    <!-- This is the tree node template for leaf nodes -->
                    <cdk-tree-node *matTreeNodeDef="let node" class="display-contents">
                        <tr class="product mat-row ng-star-inserted">
                            <td cdkTreeNodePadding
                                class="mat-cell cdk-column-position mat-column-position ng-star-inserted" fxShow.gt-md>
                                <p class="text-truncate" style="margin: 3px">
                                    <button disabled mat-icon-button>
                                        <mat-icon class="mat-icon-rtl-mirror" style="color:transparent;">minimize
                                        </mat-icon>
                                    </button>
                                    {{node.name}}</p>
                            </td>
                            <td class="mat-cell cdk-column-position mat-column-position ng-star-inserted" fxShow.gt-md>
                                {{node.routing}}
                            </td>
                            <td class="mat-cell cdk-column-position mat-column-position ng-star-inserted" fxShow.gt-md>
                                {{node.method | uppercase}}

                            </td>
                            <td class="mat-cell cdk-column-position mat-column-position ng-star-inserted" fxShow.gt-md>
                                <button color="primary" mat-button>{{(node.type == 2) ? '按钮' : '菜单'}}</button>
                            </td>
                            <td class="mat-cell cdk-column-position mat-column-position ng-star-inserted" style="text-align:right;" fxShow.gt-md>
                                <button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu"
                                        mat-icon-button>
                                    <mat-icon>more_vert</mat-icon>
                                </button>
                                <mat-menu #menu="matMenu">
                                    <button (click)="editPermit(node)" mat-menu-item>
                                        <mat-icon>edit</mat-icon>
                                        <span>编辑</span>
                                    </button>
                                    <button (click)="newPermit()" mat-menu-item>
                                        <mat-icon>add</mat-icon>
                                        <span>添加</span>
                                    </button>
                                    <button (click)="deletePermit(node)" mat-menu-item>
                                        <mat-icon>delete</mat-icon>
                                        <span>删除</span>
                                    </button>
                                </mat-menu>
                            </td>
                        </tr>
                    </cdk-tree-node>
                    <!-- This is the tree node template for expandable nodes -->
                    <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" class="display-contents">
                        <tr class="product mat-row ng-star-inserted">
                            <td cdkTreeNodePadding
                                class="mat-cell cdk-column-position mat-column-position ng-star-inserted" fxShow.gt-md>
                                <p class="text-truncate" style="margin: 3px">
                                    <button [attr.aria-label]="'toggle ' + node.name" cdkTreeNodeToggle
                                            mat-icon-button>
                                        <mat-icon class="mat-icon-rtl-mirror">
                                            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                                        </mat-icon>
                                    </button>
                                    {{node.name}}</p>
                            </td>
                            <td class="mat-cell cdk-column-position mat-column-position ng-star-inserted" fxShow.gt-md>
                                {{node.route}}

                            </td>
                            <td class="mat-cell cdk-column-position mat-column-position ng-star-inserted" fxShow.gt-md>
                                {{node.method | uppercase}}

                            </td>
                            <td class="mat-cell cdk-column-position mat-column-position ng-star-inserted" fxShow.gt-md>
                                <button color="primary" mat-button>{{(node.type == 2) ? '按钮' : '菜单'}}</button>
                            </td>
                            <td class="mat-cell cdk-column-position mat-column-position ng-star-inserted" style="text-align:right;" fxShow.gt-md>
                                <button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu"
                                        mat-icon-button>
                                    <mat-icon>more_vert</mat-icon>
                                </button>
                                <mat-menu #menu="matMenu">
                                    <button (click)="editPermit(node)" mat-menu-item>
                                        <mat-icon>edit</mat-icon>
                                        <span>编辑</span>
                                    </button>
                                    <button (click)="newPermit()" mat-menu-item>
                                        <mat-icon>add</mat-icon>
                                        <span>添加</span>
                                    </button>
                                    <button (click)="deletePermit(node)" mat-menu-item>
                                        <mat-icon>delete</mat-icon>
                                        <span>删除</span>
                                    </button>
                                </mat-menu>
                            </td>
                        </tr>
                    </cdk-tree-node>
                </cdk-tree>
            </table>

        </div>
        <!-- / CONTENT CARD -->
    </div>
    <!-- / CENTER -->
</div>
